<template>
  <div class="wrapper">

    <header>
      <i class="fa fa-angle-left" @click="goback"></i>
      <p>个人信息</p>
    </header>

    <div class="image" @click="changeImg">
      <p>头像</p>
      <div class="head-img" >
        <img :src="user.userImg">
        <i class="fa fa-angle-right"></i>
      </div>
    </div>

    <div class="id">
      <p class="p1">ID</p>
      <div class="head-id" >
        <p class="p2">{{user.userId}}</p>
      </div>
    </div>

    <div class="name" @click="changeName">
      <p class="p1">用户名</p>
      <div class="head-name" >
        <p class="p2">{{user.userName}}</p>
        <i class="fa fa-angle-right"></i>
      </div>
    </div>

    <div class="sex" @click="changeSex">
      <p class="p1">性别</p>
      <div class="head-sex" >
        <p class="p2">{{ sexFilter }}</p>
        <i class="fa fa-angle-right"></i>
      </div>
    </div>

    <div class="password" @click="changePassword">
      <p class="p1">更改密码</p>
      <div class="head-password" >
        <p class="p2"></p>
        <i class="fa fa-angle-right"></i>
      </div>
    </div>

    <div class="logout" @click="confirmLogout">
      <p class="p1">退出登录</p>
      <div class="head-logout" >
        <p class="p2"></p>
        <i class="fa fa-angle-right"></i>
      </div>
    </div>
	
	<div class="logoff" @click="confirmLogoff">
      <p class="p1">用户注销</p>
      <div class="head-logoff" >
        <p class="p2"></p>
        <i class="fa fa-angle-right"></i>
      </div>
	</div>
    <Footer></Footer>

  </div>
</template>
<script>

import Footer from "@/components/Footer.vue";

export default {
   /* eslint-disable */
  name: 'Person',
  data() {
    return {
      user: {}
    }
  },
  created() {
    this.getUserInfo(); // 初始化时获取用户信息
    this.$router.beforeEach((to, from, next) => {
      if (to.path === '/person') {
        this.getUserInfo(); // 在每次进入个人信息页面时获取最新的用户信息
      }
      next();
    });
  },
  beforeDestroy() {
    window.removeEventListener('focus', this.refreshPage); // 移除窗口获得焦点事件监听
  },
  methods:{
    goback() {
      this.$router.go(-1);
    },
    getUserInfo() {
      this.user = this.$getSessionStorage('user');
    },
    changeImg() {
      localStorage.setItem('user', JSON.stringify(this.user));
      this.$router.push({ path: '/changeImg' });
    },
    changeName() {
      localStorage.setItem('user', JSON.stringify(this.user));
      this.$router.push({ path: '/changeName' });
    },
    changeSex() {
      localStorage.setItem('user', JSON.stringify(this.user));
      this.$router.push({ path: '/changeSex' });
    },
    changePassword() {
      localStorage.setItem('user', JSON.stringify(this.user));
      this.$router.push({ path: '/changePassword' });
    },
    // 退出登录确认弹窗
    confirmLogout() {
      if (window.confirm("是否退出登录？")) {
        this.logout();
      }
    },
	confirmLogoff() {
      if (window.confirm("是否确认注销？")) {
        this.logoff();
      }
	},
	logoff() {
    // 清除本地存储的用户登录状态、令牌等信息
    localStorage.removeItem('isLoggedIn');
    localStorage.removeItem('token');

    // 清除会话存储的用户登陆状态/令牌等信息
    sessionStorage.removeItem('user');
    sessionStorage.removeItem('token');
      this.$axios
          .post('UserController/removeUser', this.$qs.stringify(this.user))
          .then(response => {
            if (response.data > 0) {
              alert('用户注销成功！');
              this.$router.push({ path: '/login' });
            } else {
              alert('用户注销失败！');
            }
          })
          .catch(error => {
            console.error(error);
          });
	},
    // 清除用户登录信息
    logout() {
      // 清除本地存储的用户登录状态、令牌等信息
      localStorage.removeItem('isLoggedIn');
      localStorage.removeItem('token');

      // 清除会话存储的用户登陆状态/令牌等信息
      sessionStorage.removeItem('user');
      sessionStorage.removeItem('token');

      // 重定向到登录页面或其他指定页面
      window.location.href = '/login'; // 将'/login'替换为你的登录页面的路径

      // 或使用 Vue Router 进行路由导航
      // this.$router.push('/login'); // 需要在 Vue Router 中配置登录页面的路由
    }
  },
  components: {
    Footer
  },
  computed: {
    sexFilter() {
      return this.user.userSex === 1 ? "男" : "女";
    }
  }
}

</script>
<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #efeff4;
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background: royalblue;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
}

.wrapper header i {
  margin-left: 6vw;
}

.wrapper header p {
  margin-left: 33vw;
}

/****************** 更改头像部分 ******************/
.wrapper .image{
  display: flex;
  align-items: center;

  width: 98%;
  height: 28vw;

  margin-top: 13vw;

  background-size: 100% 100%;
  margin-left: 4px;
  border-radius: 5px;
  box-shadow: 0 0 20px #D5D8DC;
  background-color: #ffffff;
}

.wrapper .image p{
  margin-left: 20px;
  color: #666666;
}
.wrapper .image .head-img{
  display: flex;
  align-items: center;
  margin-left: 55vw;
}

.wrapper .image .head-img img{
  width: 20vw;
  margin-right: 20px;
  border-radius: 5px;
}

.wrapper .image .head-img i{
  color: #666666;
}

/****************** ID部分 ******************/
.wrapper .id{
  display: flex;
  align-items: center;

  width: 98%;
  height: 20vw;

  margin-top: 1vw;

  background-size: 100% 100%;
  margin-left: 4px;
  border-radius: 5px;
  box-shadow: 0 0 20px #D5D8DC;
  background-color: #ffffff;
}

.wrapper .id .p1{
  margin-left: 20px;
  color: #666666;
}

.wrapper .id .head-id{
  display: flex;
  align-items: center;
  margin-left: 55vw;
}

.wrapper .id .head-id .p2{
  width: 20vw;
  margin-right: 2px;
  border-radius: 5px;
}


/****************** 更改用户名部分 ******************/
.wrapper .name{
  display: flex;
  align-items: center;

  width: 98%;
  height: 20vw;

  margin-top: 1vw;

  background-size: 100% 100%;
  margin-left: 4px;
  border-radius: 5px;
  box-shadow: 0 0 20px #D5D8DC;
  background-color: #ffffff;
}

.wrapper .name .p1{
  margin-left: 20px;
  color: #666666;
}

.wrapper .name .head-name{
  display: flex;
  align-items: center;
  margin-left: 55vw;
}

.wrapper .name .head-name .p2{
  width: 20vw;
  margin-right: 2px;
  border-radius: 5px;
}

.wrapper .name .head-name i{
  color: #666666;
}

/****************** 更改性别部分 ******************/
.wrapper .sex{
  display: flex;
  align-items: center;

  width: 98%;
  height: 20vw;

  margin-top: 1vw;

  background-size: 100% 100%;
  margin-left: 4px;
  border-radius: 5px;
  box-shadow: 0 0 20px #D5D8DC;
  background-color: #ffffff;
}

.wrapper .sex .p1{
  margin-left: 20px;
  color: #666666;
}

.wrapper .sex .head-sex{
  display: flex;
  align-items: center;
  margin-left: 59vw;
}

.wrapper .sex .head-sex .p2{
  width: 20vw;
  margin-right: 2px;
  border-radius: 5px;
}

.wrapper .sex .head-sex i{
  color: #666666;
}

/****************** 更改密码部分 ******************/
.wrapper .password{
  display: flex;
  align-items: center;

  width: 98%;
  height: 20vw;

  margin-top: 1vw;

  background-size: 100% 100%;
  margin-left: 4px;
  border-radius: 5px;
  box-shadow: 0 0 20px #D5D8DC;
  background-color: #ffffff;
}

.wrapper .password .p1{
  margin-left: 20px;
  color: #666666;
}

.wrapper .password .head-password{
  display: flex;
  align-items: center;
  margin-left: 51vw;
}

.wrapper .password .head-password .p2{
  width: 20vw;
  margin-right: 2px;
  border-radius: 5px;
}

.wrapper .password .head-password i{
  color: #666666;
}
/****************** 退出登录部分 ******************/
.wrapper .logout{
  display: flex;
  align-items: center;

  width: 98%;
  height: 20vw;

  margin-top: 1vw;

  background-size: 100% 100%;
  margin-left: 4px;
  border-radius: 5px;
  box-shadow: 0 0 20px #D5D8DC;
  background-color: #ffffff;
}

.wrapper .logout .p1{
  margin-left: 20px;
  color: #666666;
}

.wrapper .logout .head-logout{
  display: flex;
  align-items: center;
  margin-left: 51vw;
}

.wrapper .logout .head-logout .p2{
  width: 20vw;
  margin-right: 2px;
  border-radius: 5px;
}

.wrapper .logout .head-logout i{
  color: #666666;
}
/****************** 用户注销部分 ******************/
.wrapper .logoff{
  display: flex;
  align-items: center;

  width: 98%;
  height: 20vw;

  margin-top: 1vw;

  background-size: 100% 100%;
  margin-left: 4px;
  border-radius: 5px;
  box-shadow: 0 0 20px #D5D8DC;
  background-color: #ffffff;
}

.wrapper .logoff .p1{
  margin-left: 20px;
  color: #666666;
}

.wrapper .logoff .head-logoff{
  display: flex;
  align-items: center;
  margin-left: 51vw;
}

.wrapper .logoff .head-logoff .p2{
  width: 20vw;
  margin-right: 2px;
  border-radius: 5px;
}

.wrapper .logoff .head-logoff i{
  color: #666666;
}
</style>